/* =========================================================
   prdt_styl.css : product style
   ========================================================= */

/* ------------------------------
   製品ボタンリストの基本設定
   ------------------------------ */
.product-button-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.product-button-list li {
  margin: 0;
}

/* ------------------------------
   各製品ボタンの背景画像
   ------------------------------ */
.btn-cs { background-image: url(../img/icons/icon1_png/bnr_cs01.png); } /* CS ★ */
.btn-fd { background-image: url(../img/icons/icon1_png/bnr_fd01.png); } /* FD ★ */
.btn-pp { background-image: url(../img/icons/icon1_png/bnr_pp01.png); } /* PP ★ */
.btn-ms { background-image: url(../img/icons/icon1_png/bnr_ms01.png); } /* MS ★ */

/* ------------------------------
   製品ボタン共通スタイル
   ------------------------------ */
.btn-product {
  display: inline-block;
  width: 160px;				/* 204px ★ ? */
  height: 50px !important;		/* 40px  ★ ? */
  line-height: 0px !important;	 	/* 40px  ★ 横margin ? */
  text-align: center;
  font-size: 12px;
  color: #fff;
  background-size: cover;
  background-position: left;
  text-decoration: none;
  border-radius: 5px;
  border: 2px solid green;
  transition: transform 0.5s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

/* hover時 */
.btn-product:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 255, 0, 0.2);
  cursor: pointer;
}

/* =========================================================
   バナー領域（aside用）
   ========================================================= */
#hpb-aside #banner ul.product-button-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column; 		/* 縦並び */
  gap: 6px !important;              	/* 6px ボタン間隔(上下) ★ */
  align-items: flex-end;  		/* 右寄せ */
}

/* ボタン幅調整 */
#hpb-aside .btn-product {
  display: inline-block;
  width: 192px;           		/* 192px バナー枠に合わせる ★ */
  text-align: left;       		/* 左寄せ */
}

/* スクロール追従（sticky配置） */
#hpb-aside {
  position: sticky;
  top: 16px;              		/* 上からの距離 */
}

/* =========================================================
   サブ製品ページ用スタイル統一セット
   2025-10-07 TCS
   ========================================================= */

/* ---- 全体レイアウト ---- */
#hpb-wrapper {
  padding-top: 30px;
  padding-bottom: 60px;
  background-color: #fefefe;
}

/* ---- 左ナビ領域 ---- */
#hpb-nav {
  margin-top: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: linear-gradient(to bottom, #fafafa, #f0f0f0);
  border-radius: 8px;
  box-shadow: 0 0 6px rgba(0,0,0,0.1);
}

/* ---- ナビ文字サイズ調整 ---- */
#hpb-nav ul li a {
  display: block;
  padding: 6px 10px;
  font-size: 15px;
  font-weight: bold;
  color: #006633;
  text-decoration: none;
  transition: background-color 0.2s;
}

#hpb-nav ul li a:hover {
  background-color: #ccf5cc;
  border-radius: 6px;
}

/* ---- 本文エリア ---- */
#hpb-main {
  line-height: 1.8;
  font-size: 15px;
  color: #333;
  padding: 10px 20px;
}

/* ---- TOPICS枠 ---- */
#toppage-topics {
  margin-top: 25px;
  margin-bottom: 25px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #fafafa;
}

/* ---- 下段バナー共通 ---- */
#banner {
  margin-top: 40px;
  text-align: center;
}

/* ページ下部など他用途のバナー配置（wrap） */
.product-button-list.wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.product-button-list li a {
  display: flex;
  align-items: left;			// center
  justify-content: center;
  height: 70px;
  width: 220px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 10px;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
  transition: all 0.2s ease-in-out;
}

.product-button-list li a:hover {
  transform: translateY(-3px);
  box-shadow: 3px 3px 8px rgba(0,0,0,0.3);
}

/* ---- ページタイトル下の余白 ---- */
#hpb-title {
  margin-bottom: 25px;
}